<template>
	<view class="container">
		<navbar :config="config" backColor="#000"></navbar>

		<form @submit="formSubmit">
			<view>
				<view class="viewStyle">
					<input class="u-ml10" maxlength="8" name="name" :value="dataform.name"
						placeholder-style="font-weight: 400;font-size: 27rpx;color: #999999;" placeholder="请填写姓名" />
				</view>
				<view class="viewStyle">
					<input class="u-ml10" type="number" name="phone" maxlength="11" :value="dataform.phone"
						placeholder-style="font-weight: 400;font-size: 27rpx;color: #999999;" placeholder="请输入手机号码" />
				</view>
				<view class="viewStyle">
					<input class="u-ml10" type="number" name="province_code" maxlength="19"
						:value="dataform.province_code"
						placeholder-style="font-weight: 400;font-size: 27rpx;color: #999999;" placeholder="请输入银行卡号" />
				</view>
				<view class="viewStyle">
					<input class="u-ml10" type="text" name="province_name" maxlength="100"
						:value="dataform.province_name"
						placeholder-style="font-weight: 400;font-size: 27rpx;color: #999999;" placeholder="请输入开户行" />
				</view>
				<!-- <picker class="pickerList" mode="multiSelector" :range="newProvinceDataList" range-key="label"
					:value="multiIndex" @change="pickerChange" @columnchange="pickerColumnchange">
					<view class="u-flex-center border u-border-one-one ht104">
						<view class="wt140 u-font28 u-1A1A1A">所在地区：</view>
						<input class="u-ml10" placeholder-style="color: #d9d9d9;font-weight: 400;font-size: 26rpx; "
							placeholder="请选择地区" disabled
							:value="dataform.province_name + '' + dataform.city_name + '' + dataform.area_name" />
						<view class="iconfont u-ml25">&#xe6c7;</view>
					</view>
				</picker> -->
				<!--				<view class="u-flex-center border u-border-one-one ht104" @click="areaShow=true">-->
				<!--					<view class="wt140 u-font28 u-474747">所在地区：</view>-->
				<!--					<input class="u-ml10" placeholder-style="color: #d9d9d9;font-weight: 400;font-size: 26rpx; "-->
				<!--						placeholder="请选择地区" disabled-->
				<!--						:value="dataform.province_name + '' + dataform.city_name + '' + dataform.area_name" />-->
				<!--					<view class="iconfont u-ml25">&#xe6c7;</view>-->
				<!--				</view>-->
				<!-- <picker class="pickerList" :disabled="!dataform.area_name" @click="streetClick" :range="streetList" range-key="label" :value="streetListIndex"
					@change="picker2Change">
					<view class="u-flex-center border u-border-one-one ht104">
						<view class="wt140 u-font28 u-1A1A1A">所在街道：</view>
						<input class="u-ml10" placeholder-style="color: #d9d9d9;font-weight: 400;font-size: 26rpx; "
							placeholder="请选择街道" disabled :value="dataform.street_name" />
						<view class="iconfont u-ml25">&#xe6c7;</view>
					</view>
				</picker> -->
				<!-- <picker class="pickerList" :disabled="!dataform.street_name" @click="communityClick" :range="communityList" range-key="label" :value="communityListIndex"
					@change="picker3Change">
					<view class="u-flex-center border u-border-one-one ht104">
						<view class="wt140 u-font28 u-1A1A1A">所在社区：</view>
						<input class="u-ml10" placeholder-style="color: #d9d9d9;font-weight: 400;font-size: 26rpx; "
							placeholder="请选择社区" disabled :value="dataform.community_name" />
						<view class="iconfont u-ml25">&#xe6c7;</view>
					</view>
				</picker> -->
				<!--				<view class="u-flex-center border ht132" style="align-items: center;">-->
				<!--					<view class="wt140 u-font28 u-1A1A1A">详细地址：</view>-->
				<!--					<textarea class="u-ml10" style="height: 90rpx;width: 70%;margin-top: 36rpx;" maxlength="50"-->
				<!--						name="address" placeholder-style="color: #d9d9d9;font-weight: 400;font-size: 26rpx; "-->
				<!--						:value="dataform.address" placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元室等"></textarea>-->
				<!--				</view>-->
			</view>

			<view class="viewStyle morenView">
				<view class="titleView">设为默认</view>
				<view>
					<switch @change="isDefault" color="#FF211F" :checked="dataform.is_default"
						style="transform:scale(0.7)"></switch>
				</view>
			</view>


			<!-- <button class="u-btn-two u-bg-00321E u-FFF" @click="getWxAddress">一键获取微信地址</button> -->
			<button form-type="submit" class="buttonView">保存</button>

		</form>
		<!-- 地区 -->

		<!--			<u-select v-model="areaShow"-->

		<!--			 mode="mutil-column-auto" :list="newProvinceDataList" @confirm="areaConfirm"-->
		<!--				confirmColor="#FF721B" cancelColor="#474747"></u-select>-->


	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					// back: true, //false是tolbar页面 是则不写
					// title: '添加银行卡号',
					// color: '#fff',
					// //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					// backgroundColor: [1, '#FF721B'],
					// statusBarFontColor: '#1A1A1A'

					back: true, //false是tolbar页面 是则不写
					title: '添加银行卡',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000"

				},
				oldpProvinceDataList: [],
				newProvinceDataList: [
					// [],
					// [],
					// []
				], // 省市区
				multiIndex: [0, 0, 0],
				streetList: [], // 街道
				streetListIndex: [0],
				communityList: [], // 社区
				communityListIndex: [0],
				dataform: {
					name: '', //收货人姓名
					phone: '', //联系电话
					province_name: '', //省的名称
					province_code: '', //省编号
					city_code: '', //市编号
					city_name: '', //市名称
					area_name: '', //区名称
					area_code: '', //区编号
					street_code: '', //街道编号
					street_name: '', //街道名称
					community_code: '', //社区编号
					community_name: '', //社区名称
					address: '', //详细地址
					longitude: '', //微信经度
					latitude: '', //微信纬度
					is_default: false //是否是默认
				},
				areaShow: false,
			};
		},
		onLoad(options) {
			// 获取地址详情（id查询）
			if (options.id) {
				this.$http.get('/userbank/info/' + options.id)
					.then(async res => {
						if (res.code == 200) {
							this.dataform = res.data;
						}
						// this.getAreaList2()
					})
			} else {
				// this.getAreaList2();
			}
		},
		methods: {
			formSubmit: function(e) {
				let that = this;
				let target = e.detail.value;
				if (!target.name) {
					this.$mUtil.toast('请输入开户人姓名');
					return false;
				}
				if (!target.phone) {
					this.$mUtil.toast('请输入联系电话');
					return false;
				}
				if (!target.phone.match(this.$mConfig.telRegex)) {
					this.$mUtil.toast('请输入正确手机号');
					return false;
				}
				if (!target.province_code) {
					this.$mUtil.toast('请输入银行卡号');
					return false;
				}
				if (!target.province_name) {
					this.$mUtil.toast('请输入开户行');
					return false;
				}
				this.dataform.name = target.name;
				this.dataform.phone = target.phone;
				this.dataform.province_code = target.province_code;
				this.dataform.province_name = target.province_name;
				if (this.dataform.id) {
					this.$http.put('/userbank/update', this.dataform).then(async res => {
						if (res && res.code == 200) {
							uni.showToast({
								title: '修改成功',
								icon: 'none',
								duration: 3000,
								success() {
									// var pages = getCurrentPages();
									// var prevPage = pages[pages.length - 2];
									// prevPage.$vm.listAddress(1)
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										});
									}, 1000)
								}
							});
						}
					});
				} else {
					this.$http.post('/userbank/save', this.dataform).then(res => {
						if (res && res.code == 200) {
							uni.showToast({
								title: '添加成功',
								icon: 'none',
								duration: 3000,
								success() {
									var pages = getCurrentPages();
									var prevPage = pages[pages.length - 2];
									prevPage.$vm.listAddress(1);
									uni.navigateBack({
										delta: 1
									});
								}
							});
						}
					});
				}
			},
			//是否设置默认地址
			isDefault: function(e) {
				this.dataform.is_default = e.target.value;
			},
			//获取微信地址
			getWxAddress() {
				let that = this;
				uni.getSetting({
					success(res) {
						if (res.authSetting['scope.address']) {
							uni.chooseAddress({
								success(res) {
									that.dataform = {
										name: res.userName, //收货人姓名
										phone: res.telNumber, //联系电话
										province_name: res.provinceName, //省的名称
										province_code: '', //省编号
										city_code: '', //市编号
										city_name: res.cityName, //市名称
										area_name: res.countyName, //区名称
										area_code: '', //区编号
										address: '', //详细地址
										longitude: '', //微信经度
										latitude: '', //微信纬度
										is_default: false //是否是默认
									}
								}
							});
						} else {
							if (res.authSetting['scope.address'] == false) {
								uni.openSetting({
									success(res) {}
								});
							} else {
								uni.chooseAddress({
									success(res) {}
								});
							}
						}
					}
				});
			},
			// 省市区确认事件
			pickerChange(e) {
				this.multiIndex = e.detail.value;
				if (this.newProvinceDataList[2][this.multiIndex[2]] != undefined) {
					this.dataform.province_name = this.newProvinceDataList[0][this.multiIndex[0]].label;
					this.dataform.province_code = this.newProvinceDataList[0][this.multiIndex[0]].value;
					this.dataform.city_name = this.newProvinceDataList[1][this.multiIndex[1]].label;
					this.dataform.city_code = this.newProvinceDataList[1][this.multiIndex[1]].value;
					this.dataform.area_name = this.newProvinceDataList[2][this.multiIndex[2]].label;
					this.dataform.area_code = this.newProvinceDataList[2][this.multiIndex[2]].value;
					this.dataform.latitude = this.newProvinceDataList[2][this.multiIndex[2]].latitude;
					this.dataform.longitude = this.newProvinceDataList[2][this.multiIndex[2]].longitude;
				} else {
					this.dataform.province_name = this.newProvinceDataList[0][this.multiIndex[0]].label;
					this.dataform.province_code = this.newProvinceDataList[0][this.multiIndex[0]].value;
					this.dataform.city_name = this.newProvinceDataList[1][this.multiIndex[1]].label;
					this.dataform.city_code = this.newProvinceDataList[1][this.multiIndex[1]].value;
					this.dataform.latitude = this.newProvinceDataList[1][this.multiIndex[1]].latitude;
					this.dataform.longitude = this.newProvinceDataList[1][this.multiIndex[1]].longitude;
					this.dataform.area_name = '';
					this.dataform.area_code = '';
				}
			},
			pickerColumnchange(e) {
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)
				// 第一列滑动
				if (e.detail.column === 0) {
					this.multiIndex[0] = e.detail.value;
					this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].children.map((item,
						index) => {
						return item;
					});
					//当三级存在
					if (this.oldpProvinceDataList[this.multiIndex[0]].children[0].children) {
						if (this.oldpProvinceDataList[this.multiIndex[0]].children[this.multiIndex[1]]) {
							this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].children[this
								.multiIndex[1]].children.map((item, index) => {
								return item;
							});
						}
					} else {
						this.newProvinceDataList[2] = [];
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0);
					this.multiIndex.splice(2, 1, 0);
				}
				// 第二列滑动
				if (e.detail.column === 1) {
					this.multiIndex[1] = e.detail.value;
					if (this.oldpProvinceDataList[this.multiIndex[0]].children[this.multiIndex[1]].children) {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].children[this
							.multiIndex[1]].children.map((item, index) => {
							return item;
						});
					} else {
						this.newProvinceDataList[2] = [];
					}
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0);
				}
				// 第三列滑动
				if (e.detail.column === 2) {
					// console.log('第三列滑动')
					// console.log(this.multiIndex)

					if (this.multiIndex[2] != e.detail.value) {
						this.dataform.street_code = '';
						this.dataform.street_name = '';
						this.dataform.community_code = '';
						this.dataform.community_name = '';
					}

					this.multiIndex[2] = e.detail.value;
					this.getAreaList(this.newProvinceDataList[2][this.multiIndex[2]].value, 'street');
				}
			},
			/**
			 * @param {Object} parentCode
			 * @param {Object} type    value: 'street' or 'community'
			 *@description 根据上一级查询下一级。例如根据“区”查“街道”，根据“街道”查“社区”。10000是查询所有省
			 */
			getAreaList(parentCode, type) {
				// this.$http.get(`/cnarea/lbs-children/${parentCode}`, {}).then(res => {
				// 	if (res && res.code == 200) {
				// 		if (type == 'street') {
				// 			this.streetList = res.list;
				// 			this.getAreaList(this.streetList[this.streetListIndex].value, 'community');
				// 		} else {
				// 			this.communityList = res.list;
				// 		}
				// 	}
				// });
			},
			picker2Change(e) {
				if (this.streetListIndex != e.detail.value) {
					this.dataform.community_code = '';
					this.dataform.community_name = '';
				}
				this.streetListIndex = [e.detail.value];
				this.getAreaList(this.streetList[this.streetListIndex].value, 'community');
				this.dataform.street_code = this.streetList[this.streetListIndex].value;
				this.dataform.street_name = this.streetList[this.streetListIndex].label;
				this.dataform.community_name = "";
				this.dataform.community_code = ""
			},
			picker3Change(e) {
				this.communityListIndex = [e.detail.value];
				this.dataform.community_code = this.communityList[this.communityListIndex].value;
				this.dataform.community_name = this.communityList[this.communityListIndex].label;
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
		;
	}

	.border {
		border-bottom: 3rpx solid #e6e6e6;
	}

	.wt140 {
		width: 150rpx;
	}

	.ht104 {
		height: 104rpx;
		line-height: 104rpx;
	}

	.ht132 {
		height: 132rpx;
		// line-height: 132rpx;
	}

	.mt104 {
		margin-top: 104rpx;
	}

	input {
		width: 70%;
	}

	.default {
		margin: 0 65rpx;
	}

	.viewStyle {
		width: 673rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		margin-top: 19rpx;
		margin-left: 38rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-left: 19rpx;
	}

	.morenView {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.titleView {
			font-weight: 400;
			font-size: 27rpx;
			color: #999999;
		}
	}

	

	.buttonView  {
		width: 673rpx;
		height: 96rpx;
		background: #FF211F;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		font-weight: 400;
		font-size: 29rpx;
		color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 31rpx;
		left:38rpx;
	}
</style>